<template>
  <div class="login">
    <div class="loginTop">欢迎登录</div>
    <!--    登录框-->
    <div class="loginContent">
      <van-field style="width: 300px" v-model="tel" type="tel" label="手机号" placeholder="请输入手机号"/>
      <van-field style="width: 300px" v-model="password" type="password" label="密码" placeholder="请输入密码"/>
      <van-button round type="primary" color="linear-gradient(to right, #ff6034, #ee0a24)" style="width: 150px" @click="Login" >   登录   </van-button>
    </div>
  </div>
</template>
<script>
import {getLoginUser} from '@/request/api/home.js'
import { ref } from 'vue';
export default {
  setup() {
    const tel = ref('');
    const password = ref('');
    return { tel, password };
  },
  methods:{
    Login:async function(){
      let res= await this.$store.dispatch('getLogin',{phone:this.tel,password:this.password})
      //console.log(res);
      if(res.data.code===200){//如果返回的code等于200，说明登录成功，就跳转个人中心页面
        this.$store.commit('updateIsLogin',true)//登陆后将全局参数IsLogin设为true
        //console.log(this.$store.state.Login)
        this.$store.commit('updateToken',res.data.token)//登陆后将token存入Token
        let result=await getLoginUser(res.data.account.id)
        //console.log("UserID=");
        //console.log(result.data.profile.userId);
        this.$store.commit("updateUserID",result.data.profile.userId) //将用户信息存入UserID
        this.$store.commit('updateUser',result) //将用户信息存入User
        this.$router.push('/') //登录成功跳转到主页
      }else{
        alert("手机号码或者密码错误")
        this.password=''
      }
    }
  }

}
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 13.34rem;
  padding: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f53535;
  .loginTop {
    margin-top: 1rem;
    font-size: 1rem;
    color: #fff;
  }
  .loginContent {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 2rem;
    .phone,
    .passworld {
      width: 5rem;
      height: 1rem;
      border: 0.02rem solid #999;
    }
    .btn{
      width: 2rem;
      height: .6rem;
    }
  }
}
</style>
